import { useEffect, useState } from 'react'
import style from "./create.module.css";
import { setTextAlign, changFont, toggleTextDirection, setOpacitys, setColorItem, deleteComponent, toggleItalic, setFontSize, setLetterSpacing, setRotation, toggleUnderline, Weightbolder } from "../../store/module/listSlice";
import { DeleteOutlined, BorderLeftOutlined, ColumnWidthOutlined, ItalicOutlined, UnderlineOutlined, BoldOutlined } from '@ant-design/icons'
import { useDispatch, useSelector } from "react-redux";
import { Tooltip } from 'antd';
function Top() {
    const [opacity, setOpacity] = useState(1)
    //透明度
    const handleOpacityChange = (event: any) => {
        const newOpacity = event.target.value;
        setOpacity(newOpacity)
        dispatch(setOpacitys(opacity))
    }
    //当前id
    const currentCptId = useSelector(state => state.list.currentCptId)
    //属性
    const dispatch = useDispatch()
    //加粗
    const handleToggleBold = () => {
        console.log(111);
        dispatch(Weightbolder(null))

    }
    //倾斜
    const handleToggleItalic = () => {
        dispatch(toggleItalic(null))
    }
    //字体
    const [fontSize, setFontSizeState] = useState(12);
    const handleFontSizeChange = (event: any) => {
        const newSize = event.target.value;
        setFontSizeState(newSize); // 更新本地状态
        dispatch(setFontSize(newSize)); // 更新 Redux 中的字体大小
    };
    //下划线
    const handleToggleUnderline = () => {
        dispatch(toggleUnderline(null))
    }
    //字间距
    const [spacenumber, setSpacenumber] = useState(0)
    const handleLetterSpacingChange = (e: any) => {
        const newspace = e.target.value
        setSpacenumber(newspace)
        dispatch(setLetterSpacing(spacenumber))
    }
    //旋转
    const [rotation, setRotationState] = useState(0)
    const handleRotationChange = (e: any) => {
        const newRotation = e.target.value;
        setRotationState(newRotation);
        dispatch(setRotation(newRotation));
    }
    //删除
    const handleDelete = (id: number) => {
        dispatch(deleteComponent(id))
    }
    //颜色
    const [color, setColor] = useState('#000000')
    const handleColorChange = (e: any) => {
        const newcolor = e.target.value
        setColor(newcolor)
        dispatch(setColorItem(newcolor))
    }
    //方向
    const handleToggleDirection = () => {
        console.log(111);

        dispatch(toggleTextDirection(null));
    }
    //字体
    const handleFontChange = (event: any) => {
        const selectedFont = event.target.value
        dispatch(changFont({ fontFamily: selectedFont }))
    }
    const [textAlign, setTextAlignState] = useState('left');
    //对齐
    const handleTextAlignChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const newTextAlign = e.target.value;
        setTextAlignState(newTextAlign);
        dispatch(setTextAlign(newTextAlign)); // 调用 Redux action
    }
    return (
        <div className={style.shuxing}>
            <span>
                字体颜色：
                <input type="color" value={color} onChange={handleColorChange} />
            </span>
            <span>
                字体：
                <select onChange={handleFontChange}>
                    <option value="Arial">Arial</option>
                    <option value="Verdana">Verdana</option>
                    <option value="Times New Roman">Times New Roman</option>
                    <option value="SimSun">宋体</option>
                    <option value="SimHei">黑体</option>
                    <option value="Microsoft YaHei">微软雅黑</option>
                    <option value="KaiTi">楷体</option>
                    <option value="FangSong">宋体</option>
                    <option value="LiSu">隶书</option>
                </select>
            </span>
            <b onClick={handleToggleBold}><BoldOutlined /></b>
            <span onClick={handleToggleItalic}><ItalicOutlined /></span>
            <span onClick={handleToggleUnderline}><UnderlineOutlined /></span>
            <span>
                字号：
                <select value={fontSize} onChange={handleFontSizeChange}>
                    <option value="12">12</option>
                    <option value="16">16</option>
                    <option value="18">18</option>
                    <option value="20">20</option>
                    <option value="24">24</option>
                    <option value="26">26</option>
                    <option value="30">30</option>
                </select>
            </span>
            <span>对齐方式：
                <select value={textAlign} onChange={handleTextAlignChange}>
                    <option value="left">左对齐</option>
                    <option value="center">居中对齐</option>
                    <option value="right">右对齐</option>
                </select>
            </span>
            <span>
                旋转角度
                <input
                    type="number"
                    value={rotation}
                    style={{ width: '35px' }}
                    onChange={handleRotationChange}
                /> °
            </span>
            <span>字间距：
                <input type="number"
                    style={{ width: '35px' }}
                    value={spacenumber}
                    onChange={handleLetterSpacingChange}
                />
            </span>
            <span>
                <Tooltip title={<input
                    type="range"
                    min="0"
                    max="1"
                    step="0.1"
                    value={opacity}
                    onChange={handleOpacityChange}
                ></input>}>
                    <BorderLeftOutlined />
                </Tooltip>
            </span>
            <span>
                <ColumnWidthOutlined onClick={handleToggleDirection} />
            </span>
            <span>
                <DeleteOutlined onClick={() => handleDelete(currentCptId)} />
            </span>

        </div>
    )
}

export default Top
